<template>
  <div class="bgc-white mar-t-10">
    <div class="subject bgc-white">
      <span class="font-16 font-color-3">申请商品</span>
    </div>
    <div class="pad-20">
      <div class="mar-t-15">
        <div class="list-header font-14 font-w flex">
          <span>商品</span>
          <span>规格</span>
          <span>购买数</span>
          <span>退货数量</span>
          <!-- <span>实际到货</span> -->
          <span>退货费</span>
        </div>
        <div v-for="(item, index) of goodsList" :key="index" class="mar-t-10">
          <div class="goods-info pad-t-13 pad-b-20 flex">
            <div class="flex pad-l-10">
              <img class="width-80 height-80" :src="item.goodsImageUrl" alt="">
              <div class="flex-col mar-l-10">
                <span class="font-12 font-color-3 line-1 goods-title">{{item.goodsTitle}}</span>
                <span class="font-12 font-color-6 mar-t-4">货号：{{item.goodsCode}}</span>
                <span class="font-12 font-color-6">单价：<span class="count">￥{{item.goodsPrice}}</span></span>
              </div>
            </div>
            <div>
              <span class="font-12 font-color-6">{{item.skuDetail}}</span>
            </div>
            <div>
              <span class="font-12 font-color-6">{{item.orderNum}}</span>
            </div>
            <div>
              <span>{{item.goodsNum}}</span>
            </div>
            <!-- <div class="font-12">
              <span>1</span>
            </div> -->
            <div>
              <span>{{item.goodsRefundMoney}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    goodsList: {
      type: Array
    }
  },
  setup() {

  }
})
</script>

<style lang="scss" scoped>
  $td1: 355px;
  $td2: 134px;
  $td3: 150px;
  $td4: 162px;
  $td5: 161px;
  $darkBlue: #182245;
  $fontcolor: #323233;
  .subject {
    padding: 17px 19px;
    border-bottom: 1px solid #F5F5F5;
  }
  .page-number-select {
    ::v-deep(.el-input__inner) {
      width: 120px !important;
      height: 30px !important;
      line-height: 30px !important;
    }
    ::v-deep(.el-input__icon) {
      line-height: 30px !important;
    }
    ::v-deep(.el-input__suffix) {
      top: -4px !important;
    }
  }
  .list-header {
    width: 1140px;
    height: 48px;
    background: #F9F9F9;
    border: 1px solid #F5F5F5;
    color: $fontcolor;
    &>span {
      display: flex;
      align-items: center;
    }
    &>span:nth-child(1) {
      padding-left: 50px;
      width: $td1;
    }
    &>span:nth-child(2) {
      width: $td2;
    }
    &>span:nth-child(3) {
      width: $td3;
    }
    &>span:nth-child(4) {
      width: $td4;
    }
    &>span:nth-child(5) {
      width: $td5;
    }
  }
  .user-info {
    color: $fontcolor;
  }
  .goods-info {
    &>div:not(:first-child) {
      margin-top: 7px;
    }
    &>div:nth-child(1) {
      width: $td1;
    }
    &>div:nth-child(2) {
      width: $td2;
    }
    &>div:nth-child(3) {
      width: $td3;
    }
    &>div:nth-child(4) {
      width: $td4;
    }
    &>div:nth-child(5) {
      width: $td5;
    }
    .goods-title {
      width: 189px
    }
    .count {
      color: #FF452C;
    }
  }
</style>
